<template>
    <div class="count-container">
      <div class="my-chart" ref="chart_ref"></div>
    </div>
  </template>
  
  <script>
  import { mapState } from 'vuex'
  import { getOrderStatus } from '@/api/report.js'
  export default {
    props: {
        totalOrder: {
            type: Number,
            default: 0,    
        }
    },
    data() {
      return {
        myChart: null,
        allData: null,
        storeData: null,
      }
    },
    mounted() {
      this.initChart()
      this.getData()
      window.addEventListener('resize', this.screenAdapter)
      this.screenAdapter()
    },
    computed: {
      ...mapState(['theme']),
    },
    methods: {
      initChart() {
        this.myChart = this.$echarts.init(this.$refs.chart_ref, this.theme)
        const initOptions = {
          title: {
            text: '订单状态占比',
            top: 10,
            left: 'center',
          },
          legend: {
            top: '15%',
            icon: 'circle',
            left: 'center',
          },
          tooltip: {
            show: true,
            formatter: (arg) => {
              const item = arg.data
              let resStr = ''
              return (resStr = `
                        ${item.name}: ${
                parseInt((item.value / this.totalOrder) * 100) + '%'
              }
                        <br>
                        `)
            },
          },
          label: {
            show: false,
          },
          emphasis: {
            label: {
              show: true,
            },
            labelLine: {
              show: false,
            },
          },
          series: [
            {
              type: 'pie',
              label: {
                show: false,
              },
              radius: ['60%'],
              center: ['center', '70%'],
              emphasis: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          ],
        }
        this.myChart.setOption(initOptions)
      },
      async getData() {
        const { data: allData } = await getOrderStatus()
        this.allData = allData
        this.updateChart()
      },
      updateChart() {
        const dataOption = {
          series: [
            {
              data: this.allData,
            },
          ],
        }
        this.myChart.setOption(dataOption)
      },
      screenAdapter() {
        const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 3.6
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize,
            },
          },
          legend: {
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            itemGap: titleFontSize / 2,
            textStyle: {
              fontSize: titleFontSize / 2,
            },
          },
          series: [
            {
              // radius: titleFontSize,
              radius: ['40%', '55%'],
              center: ['50%', '60%'],
            },
          ],
        }
        this.myChart.setOption(adapterOption)
        this.myChart.resize()
      },
    },
  }
  </script>
  
  <style lang="less" scoped></style>
  